<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Star MQ</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    <link rel="icon" href="image/favicon.ico" type="image/x-icon">
    <style type="text/css">
        /*全局样式*/
        * {
            list-style: none; /*清除ul、li便签前面的点*/
        }

        /*公共导航栏ul标签*/
        ul {
            margin-left: -25px;
            margin-top: -25px; /*距离上部30px*/
        }

        hr {
            position: absolute;
            top: 108px; /* 设置顶部距离 */
            width: 100%; /* 控制宽度以适应页面一部分 */
            left: 33px;
        }

        /*导航栏ul标签的li子标签*/
        ul > li:not(.sp) {
            background-color: #87B5FF;
            float: left; /*整体左浮动*/
            margin-left: 10px; /*距离左边元素60*/
            margin-bottom: 10px;
            width: 100px; /*宽度100*/
            height: 2em; /*高度两个字符*/
            line-height: 2em; /*垂直居中*/
            text-align: center; /*水平居中*/
            border: 1px solid #150b0c; /*加一个1px实线浅灰色边框*/
            border-radius: 10px 10px 0 0; /*上圆下方*/
        }

        /*鼠标悬停到li标签时*/
        .nav > ul > li:hover {
            background-color: coral;
            cursor: pointer;
        }

        .highlight {
            color: white;
            background-color: #666666;
        }


        /*使内容和导航栏对齐*/
        .one {
            position: absolute;
            top: 108px; /* 设置顶部距离 */
            width: 100%; /* 控制宽度以适应页面一部分 */
            left: 33px;
        }

        details summary {
            display: flex;
            align-items: center;
            padding: 2px 5px;
            position: relative;
            cursor: pointer;
        }

        /* 首先，确保折叠列表箭头初始指向右（90度） */
        details summary .fas {
            color: coral; /*箭头颜色*/
            transform: rotate(-90deg); /* 将初始旋转角度设置为90度 */
            margin-right: 0.5em;
            transition: transform 0.2s;
        }

        /* 当 details 元素处于打开状态时，将箭头旋转至向下（即270度） */
        details[open] summary .fas {
            transform: rotate(0deg);
        }

        details[open] summary {

            background-color: lightgray; /* 当折叠时，设置表头背景色为浅灰色 */

        }

        details:not([open]) summary {
            background-color: #eeecec; /* 当展开时，恢复默认背景色（假设是透明） */
        }

        /*分割线*/
        .divider {
            height: 1px; /* 保持1像素的高度 */
            margin: 1em 0; /* 可以根据需要调整间距 */
            background-color: #999; /* 更改为深灰色，接近大部分浏览器中<hr>的默认颜色 */
            overflow: hidden; /* 可以保留这一条以防止内容溢出 */
        }

        option {
            text-align: center;
        }

        .pic {
            position: relative;
            width: 150px /* 任意宽度 */;
            height: 100px /* 任意高度 */;
        }

        .absolutely-positioned-image {
            position: absolute;
            /* 以下根据需要设置 */
            top: 0px; /* 从顶部偏移50像素 */
            right: 0; /* 靠近右侧 */
            bottom: 20px; /* 从底部偏移20像素 */
            left: 30%; /* 从左侧偏移容器宽度的30% */
        }
    </style>
</head>
<!--图标-->
<body style="background-image: url('image/star_mq.jpg');background-size: 210px 48px;background-position: 30px 20px;background-repeat: no-repeat;">
<!-- 整体页面 -->
<div class="basic_info">
    <li align="right" style="margin-bottom: 5px">
        <font size="1">Refreshed</font>
        <font size="1" id="current-time"></font>
        <select id="refresh-select" onchange="updateRefreshInterval(this.value)" style="width: 170px;height: 25px;">
            <option value="5000">Refresh every 5 seconds</option>
            <option value="10000">Refresh every 10 seconds</option>
            <option value="30000">Refresh every 30 seconds</option>
            <option value="0">Do not refresh</option>
        </select>
    </li>
    <li align="right" style="margin-bottom: 5px">
        <font size="1">
            Virtual host
        </font>
        <select id="v-host-select" style="width: 45px;height: 25px;">
            <option>All</option>
        </select>
    </li>
    <li align="right">
        <span size="1" style="font-size: 12px">User </span>
        <span id="username" size="1" style="font-size: 12px"></span>
        <button id="logout" onclick="logout()"
                style="color: rgb(42,41,41); background-color:transparent;border-radius: 6px">
            Log out
        </button>
    </li>
</div>
<hr>
<!--翻页器-->
<div class="nav">
    <!-- 导航栏 -->
    <ul class="ul">
        <!--         导航栏子标签-->
        <li class="list-item">
            <span class="one_icon nav_btn" value="one">Overview</span>
        </li>
        <!-- 导航栏子标签 -->
        <!--        <li class="list-item" style="width: 130px">-->
        <!--            <span class="one_icon nav_btn" value="two">Overview</span>-->
        <!--        </li>-->
        <!-- 导航栏子标签 -->
        <li class="list-item">
            <span class="one_icon nav_btn" value="four">Exchanges</span>
        </li>
        <!-- 导航栏子标签 -->
        <li>
            <span class="one_icon nav_btn" value="five">Queues</span>
        </li>
        <!-- 导航栏子标签 -->
        <li class="list-item">
            <span class="one_icon nav_btn" value="three">Bindings</span>
        </li>

        <!-- 导航栏子标签 -->
        <li class="list-item">
            <span class="one_icon nav_btn" value="six">Messages</span>
        </li>
    </ul>
    <!-- 换行使页面可视化效果更好 -->
    <br><br>

    <!-- 分页内容存放区 -->
    <div class="one">
        <!-- Overview -->
        <div class="onePage page">
            <li style="font-size: 16px;margin-top: 10px;">
                <h2 style="margin-top: 0;font-weight:400;color: #4f4e4e;margin-bottom: 0px;">
                    Overview
                </h2>
            </li>

            <div class="content">
                <!--       分页器         -->
                <details style="margin-bottom: 4px">
                    <summary style="font-size: 15px;font-weight: 600;">
                        <i class="fas fa-caret-down"></i>
                        All virtual hosts(
                        <div id="virtualHostNum"></div>
                        )
                        <button style="border: none;background-color: #87B5FF;border-radius: 10px 10px 10px 10px;cursor:pointer"
                                onclick="refreshOverview()">
                            refresh
                        </button>
                    </summary>
                    <p style="margin-top: 4px;"></p>
                    <div id="virtualHostTableContainer">
                    </div>
                </details>
                <!--        虚拟机表        -->
                <p style="margin-top: 4px;"></p>
                <!--        创建虚拟机       -->
                <details style="margin-top: 4px">
                    <summary style="font-size: 15px;font-weight: 600;">
                        <i class="fas fa-caret-down"></i>Add a new virtual host
                    </summary>
                    <table style="border-spacing: 2px 6px">
                        <tr align="right">
                            <th style="font-weight: 300">Name：</th>
                            <td align="left">
                                <input id="vName" type="text" name="virtualHostName" required>
                                <text style="color: coral;">*</text>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <button id="addv-host"
                                        style="width: 100px;height: 20px;font-size: 12px;font-weight: 300">Add
                                    virtual
                                    host
                                </button>
                            </td>
                        </tr>
                    </table>
                </details>
                <div class="divider"></div>
            </div>
        </div>
        <!-- Exchanges -->
        <div class="fourPage page" style="display: none; border: 1px">
            <li style="font-size: 16px;margin-top: 10px;">
                <h2 style="margin-top: 0;font-weight:400;color: #4f4e4e;margin-bottom: 0px;">
                    Exchanges
                </h2>
            </li>

            <div class="content">
                <!--       分页器         -->
                <details style="margin-bottom: 4px">
                    <summary style="font-size: 15px;font-weight: 600;">
                        <i class="fas fa-caret-down">
                        </i>
                        All exchanges(
                        <div id="exchangeNum"></div>
                        )
                        <button style="border: none;background-color: #87B5FF;border-radius: 10px 10px 10px 10px;cursor:pointer"
                                onclick="refreshExchange()">
                            refresh
                        </button>
                    </summary>
                    <p style="margin-top: 4px;"></p>
                    <div id="exchangeTableContainer"></div>
                </details>
                <!--        交换机表        -->
                <p style="margin-top: 4px;"></p>
                <!--        创建交换机       -->
                <details style="margin-top: 4px">
                    <summary style="font-size: 15px;font-weight: 600;">
                        <i class="fas fa-caret-down"></i>Add a new exchange
                    </summary>
                    <form id="addExchange" action="/exchange/add" method="post"
                          style="font-size: 13px; font-weight: 100">
                        <table style="border-spacing: 2px 6px">
                            <tr align="right" style="margin: 20px">
                                <th style="font-weight: 450">Virtual host：</th>
                                <td align="left">
                                    <select id="v-e-add" name="virtualHostName">
                                    </select>
                                </td>
                            </tr>
                            <tr align="right">
                                <th style="font-weight: 450">Name：</th>
                                <td align="left">
                                    <input type="text" id="add-e-n" name="exchangeName" required>
                                    <text style="color: coral;">*</text>
                                </td>
                            </tr>
                            <tr align="right">
                                <th style="font-weight: 450">Type：</th>
                                <td align="left">
                                    <select name="exchangeTypeCN" id="add-e-t">
                                        <option value="DIRECT">direct</option>
                                        <option value="FANOUT">fanout</option>
                                        <option value="TOPIC">topic</option>
                                    </select>
                                </td>
                            </tr>
                            <tr align="right">
                                <th style="font-weight: 450">Durability：</th>
                                <td align="left">
                                    <select name="durable" id="add-e-d">
                                        <option value="true">durable</option>
                                        <option value="false">transient</option>
                                    </select>
                                </td>
                            </tr>
                            <tr align="right">
                                <th style="font-weight: 450">Auto Delete：</th>
                                <td align="left">
                                    <select name="autoDelete" id="add-e-a">
                                        <option value="false">No</option>
                                        <option value="true">Yes</option>
                                    </select>
                                </td>
                            </tr>

                            <tr>
                                <th></th>
                                <td>
                                    <input align="left" type="submit" value="Add exchange">
                                </td>
                            </tr>
                        </table>
                    </form>
                </details>
                <div class="divider"></div>
            </div>
        </div>
        <!-- Queues -->
        <div class="fivePage page" style="display: none; border: 1px ">
            <li style="font-size: 16px;margin-top: 10px;">
                <h2 style="margin-top: 0;font-weight:400;color: #4f4e4e;margin-bottom: 0px;">
                    Queues
                </h2>
            </li>

            <div class="content">
                <!--       分页器         -->
                <details style="margin-bottom: 4px">
                    <summary style="font-size: 15px;font-weight: 600;">
                        <i class="fas fa-caret-down">
                        </i>
                        All queues(
                        <div id="queueNum"></div>
                        )
                        <button style="border: none;background-color: #87B5FF;border-radius: 10px 10px 10px 10px;cursor:pointer"
                                onclick="refreshQueue()">
                            refresh
                        </button>
                    </summary>
                    <!--        队列表        -->
                    <p style="margin-top: 4px;"></p>
                    <div id="queueTableContainer"></div>
                </details>

                <p style="margin-top: 4px;"></p>
                <!--        创建队列       -->
                <details style="margin-top: 4px">
                    <summary style="font-size: 15px;font-weight: 600;">
                        <i class="fas fa-caret-down"></i>Add a new queue
                    </summary>
                    <form id="addQueue" action="/queue/add" method="post"
                          style="font-size: 13px; font-weight: 100">
                        <table style="border-spacing: 2px 6px">
                            <tr align="right" style="margin: 20px">
                                <th style="font-weight: 450">Virtual host：</th>
                                <td align="left">
                                    <select id="v-q-add" name="virtualHostName">
                                    </select>
                                </td>
                            </tr>
                            <tr align="right">
                                <th style="font-weight: 450">Name：</th>
                                <td align="left">
                                    <input type="text" name="queueName" id="v-q-q" required>
                                    <text style="color: coral;">*</text>
                                </td>
                            </tr>
                            <tr align="right">
                                <th style="font-weight: 450">Exclusive：</th>
                                <td align="left">
                                    <select name="exclusive" id="v-q-e">
                                        <option value="false">no</option>
                                        <option value="true">yes</option>
                                    </select>
                                </td>
                            </tr>
                            <tr align="right">
                                <th style="font-weight: 450">Durability：</th>
                                <td align="left">
                                    <select name="durable" id="v-q-d">
                                        <option value="true">durable</option>
                                        <option value="false">transient</option>
                                    </select>
                                </td>
                            </tr>
                            <tr align="right">
                                <th style="font-weight: 450">Auto Delete：</th>
                                <td align="left">
                                    <select name="autoDelete" id="v-q-a">
                                        <option value="false">no</option>
                                        <option value="true">yes</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th></th>
                                <td>
                                    <input type="submit" value="Add queue">
                                </td>
                            </tr>
                        </table>

                    </form>
                </details>
                <div class="divider"></div>
            </div>
        </div>
        <!-- Bindings -->
        <div class="threePage page" style="display: none;">
            <li style="font-size: 16px;margin-top: 10px;">
                <h2 style="margin-top: 0;font-weight:400;color: #4f4e4e;margin-bottom: 0px;">
                    Bindings
                </h2>
            </li>

            <div class="content">
                <!--       分页器         -->
                <details style="margin-bottom: 4px">
                    <summary style="font-size: 15px;font-weight: 600;">
                        <i class="fas fa-caret-down">
                        </i>
                        All bindings(
                        <div id="bindingNum"></div>
                        )
                        <button style="border: none;background-color: #87B5FF;border-radius: 10px 10px 10px 10px;cursor:pointer"
                                onclick="refreshBinding()">
                            refresh
                        </button>
                    </summary>
                    <!--        绑定表        -->
                    <p style="margin-top: 4px;"></p>
                    <div id="bindingTableContainer"></div>
                </details>

                <p style="margin-top: 4px;"></p>
                <!--        创建绑定       -->
                <details style="margin-top: 4px">
                    <summary style="font-size: 15px;font-weight: 600;">
                        <i class="fas fa-caret-down"></i>Add a new binding
                    </summary>
                    <form id="addBinding" action="/binding/add" method="post"
                          style="font-size: 13px; font-weight: 100">
                        <table style="border-spacing: 2px 6px">
                            <tr align="right" style="margin: 20px">
                                <th style="font-weight: 450">Virtual host：</th>
                                <td align="left">
                                    <select id="v-b-add" name="virtualHostName">
                                    </select>
                                </td>
                            </tr>
                            <tr align="right">
                                <th style="font-weight: 450">Exchange Name：</th>
                                <td align="left">
                                    <input type="text" name="exchangeName" id="v-b-e" required>
                                    <text style="color: coral;">*</text>
                                </td>
                            </tr>

                            <tr align="right">
                                <th style="font-weight: 450">Queue Name：</th>
                                <td align="left">
                                    <input type="text" name="queueName" id="v-b-q" required>
                                    <text style="color: coral;">*</text>
                                </td>
                            </tr>

                            <tr align="right">
                                <th style="font-weight: 450">Binding Key：</th>
                                <td align="left">
                                    <input type="text" name="bindingKey" id="v-b-bk" required>
                                    <text style="color: coral;">*</text>
                                </td>
                            </tr>

                            <tr>
                                <th></th>
                                <td>
                                    <input type="submit" value="Add binding">
                                </td>
                            </tr>
                        </table>
                    </form>
                </details>
                <div class="divider"></div>
            </div>
        </div>
        <!-- Messages -->
        <div class="sixPage page" style="display: none; border: 1px ">
            <li style="font-size: 16px;margin-top: 10px;">
                <h2 style="margin-top: 0;font-weight:400;color: #4f4e4e;margin-bottom: 0px;">
                    Messages
                </h2>
            </li>

            <div class="content">
                <details style="margin-bottom: 4px">
                    <summary style="font-size: 15px;font-weight: 600;">
                        <i class="fas fa-caret-down">
                        </i>
                        All messages(
                        <div id="messageNum"></div>
                        )
                    </summary>
                    <!--        消息表        -->
                    <p style="margin-top: 4px;"></p>
                    <div id="messageTableContainer"></div>
                </details>
                <p style="margin-top: 4px;"></p>
                <!--        发布消息       -->
                <details style="margin-top: 4px">
                    <summary style="font-size: 15px;font-weight: 600;">
                        <i class="fas fa-caret-down"></i>Publish a new message
                    </summary>
                    <form id="publishMessage" action="/message/publish" method="post"
                          style="font-size: 13px; font-weight: 100">
                        <table style="border-spacing: 2px 6px">
                            <tr align="right" style="margin: 20px">
                                <th style="font-weight: 450">Virtual host：</th>
                                <td align="left">
                                    <select id="v-m-add" name="virtualHostName">
                                    </select>
                                </td>
                            </tr>

                            <tr align="right" style="margin: 20px">
                                <th style="font-weight: 450">Exchange：</th>
                                <td align="left">
                                    <select id="v-m-e" name="exchangeName">
                                    </select>
                                </td>
                            </tr>


                            <tr align="right">
                                <th style="font-weight: 450">Message：</th>
                                <td align="left">
                                    <input type="text" name="message" id="v-m-msg" required>
                                    <text style="color: coral;">*</text>
                                </td>
                            </tr>

                            <tr align="right">
                                <th style="font-weight: 450">Routing Key：</th>
                                <td align="left">
                                    <input type="text" name="routingKey" id="v-m-r" required>
                                    <text style="color: coral;">*</text>
                                </td>
                            </tr>

                            <tr align="right" style="margin: 20px">
                                <th style="font-weight: 450">Delivery Mode：</th>
                                <td align="left">
                                    <select id="v-m-d" id="v-m-dm" name="deliveryMode">
                                        <option value="2">yes</option>
                                        <option value="1">no</option>
                                    </select>
                                </td>
                            </tr>

                            <tr>
                                <th></th>
                                <td>
                                    <input type="submit" value="Publish">
                                </td>
                            </tr>
                        </table>
                    </form>
                </details>
                <div class="divider"></div>
            </div>
        </div>
    </div>
</div>
<!-- 不需要网页跳转，可分页显示内容的JS部分 -->
<script type="text/javascript">
    // 定义按钮函数
    $('.nav_btn').click(function () {
        // 获取按钮名字
        var pageName = $(this).attr('value');
        // 获取按钮类名
        var pageClass = '.' + pageName + 'Page';
        // 背景跳转
        $('.nav_btn').css('background', '');
        // 非按钮对应页面隐藏
        $('.page').css('display', 'none');
        // 按钮对应页面显示
        $(pageClass).css('display', 'block');
    })
</script>
</body>
<!-- 回调 -->
<script>
    function getUsername() {
        return new Promise((resolve, reject) => {
            $.ajax({
                type: 'get',
                url: '/user/name',
                success: function (username) {
                    resolve(username);
                },
                error: function (error) {
                    reject(error);
                }
            });
        });
    }

    // 定义一个全局变量存储定时器ID
    let timerId = null;

    // 显示当前时间的函数，包含时间格式化
    function displayCurrentTime() {
        const date = new Date();
        const year = date.getFullYear();
        const month = ("0" + (date.getMonth() + 1)).slice(-2);
        const day = ("0" + date.getDate()).slice(-2);
        const hours = ("0" + date.getHours()).slice(-2);
        const minutes = ("0" + date.getMinutes()).slice(-2);
        const seconds = ("0" + date.getSeconds()).slice(-2);

        const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

        document.getElementById("current-time").textContent = formattedTime;
    }

    // 更新刷新间隔的函数
    function updateRefreshInterval(intervalMillis) {
        clearInterval(timerId); // 先清除已存在的定时器

        if (intervalMillis > 0) {
            timerId = setInterval(displayCurrentTime, intervalMillis);
        }
    }

    // 初始化，首次加载时显示当前时间，并设置默认刷新频率
    displayCurrentTime();
    updateRefreshInterval(5000); // 默认5秒刷新一次
    let uname = null;
    // 回调 获取username 后
    getUsername().then((username) => {
        var textElement = document.getElementById("username");
        textElement.textContent = username;
        uname = username;
        $(document).ready(function () {
            $.ajax({
                type: 'get',
                url: '/v-host/userAll?username=' + username,
                dataType: 'json',
                success: function (virtualHosts) {
                    var select = $('#v-host-select');
                    var selectAddE = $('#v-e-add');
                    var selectAddQ = $('#v-q-add');
                    var selectAddB = $('#v-b-add');
                    var selectAddM = $('#v-m-add');
                    $.each(virtualHosts, function (index, virtualHost) {
                        var option1 = $('<option>').text(virtualHost.virtualHostName);
                        var option2 = $('<option>').text(virtualHost.virtualHostName);
                        var option3 = $('<option>').text(virtualHost.virtualHostName);
                        var option4 = $('<option>').text(virtualHost.virtualHostName);
                        var option5 = $('<option>').text(virtualHost.virtualHostName);
                        select.append(option1);
                        selectAddE.append(option2);
                        selectAddQ.append(option3);
                        selectAddB.append(option4);
                        selectAddM.append(option5);
                    });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.error('Error fetching virtual hosts:', textStatus, ', Details:', errorThrown);
                }
            });


        });
        <!--overview-->
        $.ajax({
            url: "/v-host/overview",
            type: "get",
            data: {
                username: username
            },
            dataType: "json",
            success: function (data) {
                var html = '<table style="border-collapse: collapse; border: 1px solid black;">';
                html += '<tr>';
                html += '<th style="border: 1px solid black; padding: 8px;">Name</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">Exchange Number</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">Queue Number</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">Binding Number</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">Message Number</th>';
                html += '</tr>';
                var k = 0;
                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    if (i % 2 === 0) {
                        html += '<tr bgcolor="lightgray">';
                    } else {
                        html += '<tr>';
                    }
                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + item.virtualHostName + '</td>';
                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + item.exchangeNumber + '</td>';
                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + item.queueNumber + '</td>';
                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + item.bindingNumber + '</td>';
                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + item.messageNumber + '</td>';
                    html += '</tr>';
                    k++;
                }

                html += '</table>';

                $('#virtualHostTableContainer').html(html);
                $('#virtualHostNum').text(k);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log('Error: ' + textStatus + ', ' + errorThrown);
            }
        });

    }).catch((error) => {
        console.error('Error occurred while fetching username:', error);
    });

    function logout() {
        $.ajax({
            type: "get",
            url: "/user/logout",
            success: function () {
                window.location.href = "login.html";
            }
        });
    }

    function refreshOverview() {
        $.ajax({
            url: "/v-host/overview",
            type: "get",
            data: {
                username: uname
            },
            dataType: "json",
            success: function (data) {
                var html = '<table style="border-collapse: collapse; border: 1px solid black;">';
                html += '<tr>';
                html += '<th style="border: 1px solid black; padding: 8px;">Name</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">Exchange Number</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">Queue Number</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">Binding Number</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">Message Number</th>';
                html += '</tr>';
                var k = 0;
                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    if (i % 2 === 0) {
                        html += '<tr bgcolor="lightgray">';
                    } else {
                        html += '<tr>';
                    }
                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + item.virtualHostName + '</td>';
                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + item.exchangeNumber + '</td>';
                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + item.queueNumber + '</td>';
                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + item.bindingNumber + '</td>';
                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + item.messageNumber + '</td>';
                    html += '</tr>';
                    k++;
                }

                html += '</table>';

                $('#virtualHostTableContainer').html(html);
                $('#virtualHostNum').text(k);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log('Error: ' + textStatus + ', ' + errorThrown);
            }
        });
    }

    refreshOverview();
</script>
<!-- 强制登录 -->
<script>
    $.ajax({
        type: "get",
        url: "/user/check",
        success: function (result) {
            // 用户已经登录
            if (!result) {
                window.location.href = "login.html";
            }
        },
        error: function () {

        }
    });
</script>
<!-- 点击导航栏变色-->
<script>
    $(function () {
        $('.ul li').click(function () {
            $(this).addClass('highlight').siblings().removeClass('highlight');
        })
    });
</script>
<!--请求所有的交换机-->
<script>
    $(document).ready(function () {
        $("#v-host-select").on("change", function () {
            var selectedOption = $(this).val();
            $.ajax({
                url: "/exchange/v-hostAll",
                type: "get",
                data: {
                    virtualHostName: selectedOption,
                    username: uname
                },
                success: function (exchangeList) {
                    var html = '<table style="border-collapse: collapse; border: 1px solid black;">';
                    html += '<tr>';
                    html += '<th style="border: 1px solid black; padding: 8px;">Virtual host</th>';
                    html += '<th style="border: 1px solid black; padding: 8px;">Name</th>';
                    html += '<th style="border: 1px solid black; padding: 8px;">Type</th>';
                    html += '<th style="border: 1px solid black; padding: 8px;">durable</th>';
                    html += '<th style="border: 1px solid black; padding: 8px;">autoDelete</th>';
                    html += '</tr>';
                    let i = 0;
                    exchangeList.forEach(function (exchange) {
                        if (i % 2 === 0) {
                            html += '<tr bgcolor="lightgray">';
                            html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.virtualHostName + '</td>';
                            html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.exchangeName + '</td>';
                            html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.exchangeTypeCN + '</td>';
                            html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.durable + '</td>';
                            html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.autoDelete + '</td>';
                            html += '</tr>';
                        } else {
                            html += '<tr>';
                            html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.virtualHostName + '</td>';
                            html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.exchangeName + '</td>';
                            html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.exchangeTypeCN + '</td>';
                            html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.durable + '</td>';
                            html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.autoDelete + '</td>';
                            html += '</tr>';
                        }
                        i = i + 1;
                    });
                    // 将 i 的值凭借到 <div id=exchangeNum> <div> 标签内部
                    html += '</table>';
                    $('#exchangeTableContainer').html(html);
                    $('#exchangeNum').text(i);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log('Error: ' + textStatus + ", " + errorThrown);
                }
            });
        })
    });

    function refreshExchange() {
        var vName = $('#v-host-select').val();
        $.ajax({
            url: "/exchange/v-hostAll",
            type: "get",
            data: {
                virtualHostName: vName,
                username: uname
            },
            success: function (exchangeList) {
                var html = '<table style="border-collapse: collapse; border: 1px solid black;">';
                html += '<tr>';
                html += '<th style="border: 1px solid black; padding: 8px;">Virtual host</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">Name</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">Type</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">durable</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">autoDelete</th>';
                html += '</tr>';
                let i = 0;
                exchangeList.forEach(function (exchange) {
                    if (i % 2 === 0) {
                        html += '<tr bgcolor="lightgray">';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.virtualHostName + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.exchangeName + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.exchangeTypeCN + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.durable + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.autoDelete + '</td>';
                        html += '</tr>';
                    } else {
                        html += '<tr>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.virtualHostName + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.exchangeName + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.exchangeTypeCN + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.durable + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + exchange.autoDelete + '</td>';
                        html += '</tr>';
                    }
                    i = i + 1;
                });
                // 将 i 的值凭借到 <div id=exchangeNum> <div> 标签内部
                html += '</table>';
                $('#exchangeTableContainer').html(html);
                $('#exchangeNum').text(i);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log('Error: ' + textStatus + ", " + errorThrown);
            }
        });
    }

    refreshExchange();
</script>
<!--添加交换机-->
<script>
    $(document).ready(function () {
        $('#addExchange').submit(function (event) {
            event.preventDefault();
            // 获取表单数据
            var vName = $('#v-e-add').val();
            var eName = $('#add-e-n').val();
            var tName = $('#add-e-t').val();
            var dName = $('#add-e-d').val();
            var aName = $('#add-e-a').val();

            // 发送AJAX请求
            $.ajax({
                url: this.action, // 使用表单自身的action属性作为URL
                method: this.method, // 使用表单自身的method属性作为请求方法
                data: {
                    username: uname,
                    virtualHostName: vName,
                    exchangeName: eName,
                    exchangeTypeCN: tName,
                    durable: dName,
                    autoDelete: aName
                },
                success: function (result) {
                    // 请求成功时的回调函数
                    if (result) {
                        // 如果服务器返回成功状态，则显示成功信息
                        $('#result').text('表单提交成功！');
                        alert("添加成功！");
                    } else {
                        // 如果服务器返回失败状态，则显示错误信息
                        $('#result').text('表单提交失败，请重试！');
                        alert("添加失败！");
                    }
                    // 重置表单字段
                    $('form select[name="virtualHostName"]').val('');
                    $('form input[name="exchangeName"]').val('');
                    $('form select[name="exchangeTypeCN"]').val('DIRECT');
                    $('form select[name="durable"]').val('true');
                    $('form select[name="autoDelete"]').val('false');

                },
                error: function () {
                    // 请求失败时的回调函数
                    $('#result').text('请求失败，请检查网络连接！');
                    alert("添加失败！");
                    // 重置表单字段
                    $('form select[name="virtualHostName"]').val('');
                    $('form input[name="exchangeName"]').val('');
                    $('form select[name="exchangeTypeCN"]').val('DIRECT');
                    $('form select[name="durable"]').val('true');
                    $('form select[name="autoDelete"]').val('false');
                }
            });
        });
    });
</script>
<!--添加虚拟机-->
<script>
    $(document).ready(function () {
        // 给按钮绑定点击事件
        $("#addv-host").click(function () {
            // 获取input框的值
            var virtualHostName = $("#vName").val();
            var username = $('#username').text();
            // 验证输入值是否为空或其他必要验证
            // 发起Ajax POST请求


            $.ajax({
                type: "POST",
                url: "/v-host/add",
                data: {
                    virtualHostName: virtualHostName,
                    username: username
                },
                success: function (response) {
                    // 请求成功时的操作，比如提示用户添加成功
                    if (response) {
                        alert("添加成功!");
                    } else {
                        alert("添加失败");
                    }
                    $('input[name="virtualHostName"]').val('');
                    // 可能还需要根据后端返回的数据进行页面更新或其他操作
                },
                error: function (xhr, status, error) {
                    // 请求失败时的操作，比如提示用户添加失败
                    alert("添加失败");
                    $('input[name="virtualHostName"]').val('');
                }
            });
        });
    });
</script>
<!--添加队列-->
<script>
    $(document).ready(function () {
        $('#addQueue').submit(function (event) {
            event.preventDefault();
            // 获取表单数据
            var vName = $('#v-q-add').val();
            var qName = $('#v-q-q').val();
            var eName = $('#v-q-e').val();
            var dName = $('#v-q-d').val();
            var aName = $('#v-q-a').val();
            // 发送AJAX请求
            $.ajax({
                url: this.action, // 使用表单自身的action属性作为URL
                method: this.method, // 使用表单自身的method属性作为请求方法
                data: {
                    username: uname,
                    virtualHostName: vName,
                    queueName: qName,
                    exclusive: eName,
                    durable: dName,
                    autoDelete: aName
                },
                success: function (result) {
                    // 请求成功时的回调函数
                    if (result) {
                        // 如果服务器返回成功状态，则显示成功信息
                        $('#result').text('表单提交成功！');
                        alert("添加成功！");
                    } else {
                        // 如果服务器返回失败状态，则显示错误信息
                        $('#result').text('表单提交失败，请重试！');
                        alert("添加失败！");
                    }
                    // 重置表单字段
                    $('form select[name="virtualHostName"]').val('');
                    $('form input[name="queueName"]').val('');
                    $('form select[name="exclusive"]').val('false');
                    $('form select[name="durable"]').val('true');
                    $('form select[name="autoDelete"]').val('false');
                },
                error: function () {
                    // 请求失败时的回调函数
                    $('#result').text('请求失败，请检查网络连接！');
                    alert("添加失败！");
                    // 重置表单字段
                    $('form select[name="virtualHostName"]').val('');
                    $('form input[name="exchangeName"]').val('');
                    $('form select[name="exchangeTypeCN"]').val('DIRECT');
                    $('form select[name="durable"]').val('true');
                    $('form select[name="autoDelete"]').val('false');
                }
            });
        });
    });
</script>
<!--请求所有队列-->
<script>
    $(document).ready(function () {
        $("#v-host-select").on("change", function () {
            var selectedOption = $(this).val();
            $.ajax({
                url: "/queue/v-hostAll",
                type: "get",
                data: {
                    virtualHostName: selectedOption,
                    username: uname
                },
                success: function (queueList) {
                    var html = '<table style="border-collapse: collapse; border: 1px solid black;">';
                    html += '<tr>';
                    html += '<th style="border: 1px solid black; padding: 8px;">Virtual host</th>';
                    html += '<th style="border: 1px solid black; padding: 8px;">Name</th>';
                    html += '<th style="border: 1px solid black; padding: 8px;">Exclusive</th>';
                    html += '<th style="border: 1px solid black; padding: 8px;">durable</th>';
                    html += '<th style="border: 1px solid black; padding: 8px;">autoDelete</th>';
                    html += '<th style="border: 1px solid black; padding: 8px;">Message Number</th>';
                    html += '</tr>';
                    let i = 0;
                    queueList.forEach(function (queue) {
                        if (i % 2 === 0) {
                            html += '<tr bgcolor="lightgray">';
                        } else {
                            html += '<tr >';
                        }

                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + queue.virtualHostName + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + queue.queueName + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + queue.exclusive + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + queue.durable + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + queue.autoDelete + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + queue.messageNumber + '</td>';
                        html += '</tr>';
                        i = i + 1;
                    });
                    // 将 i 的值凭借到 <div id=exchangeNum> <div> 标签内部
                    html += '</table>';
                    $('#queueTableContainer').html(html);
                    $('#queueNum').text(i);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log('Error: ' + textStatus + ", " + errorThrown);
                }
            });
        })
    });

    function refreshQueue() {
        var vName = $('#v-host-select').val();
        $.ajax({
            url: "/queue/v-hostAll",
            type: "get",
            data: {
                virtualHostName: vName,
                username: uname
            },
            success: function (queueList) {
                var html = '<table style="border-collapse: collapse; border: 1px solid black;">';
                html += '<tr>';
                html += '<th style="border: 1px solid black; padding: 8px;">Virtual host</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">Name</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">Exclusive</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">durable</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">autoDelete</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">Message Number</th>';
                html += '</tr>';
                let i = 0;
                queueList.forEach(function (queue) {
                    if (i % 2 === 0) {
                        html += '<tr bgcolor="lightgray">';
                    } else {
                        html += '<tr >';
                    }

                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + queue.virtualHostName + '</td>';
                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + queue.queueName + '</td>';
                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + queue.exclusive + '</td>';
                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + queue.durable + '</td>';
                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + queue.autoDelete + '</td>';
                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + queue.messageNumber + '</td>';
                    html += '</tr>';
                    i = i + 1;
                });
                // 将 i 的值凭借到 <div id=exchangeNum> <div> 标签内部
                html += '</table>';
                $('#queueTableContainer').html(html);
                $('#queueNum').text(i);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log('Error: ' + textStatus + ", " + errorThrown);
            }
        });
    }
</script>
<!--添加绑定-->
<script>
    $(document).ready(function () {
        $('#addBinding').submit(function (event) {
            event.preventDefault();
            // 获取表单数据
            var vName = $('#v-b-add').val();
            var eName = $('#v-b-e').val();
            var qName = $('#v-b-q').val();
            var bkName = $('#v-b-bk').val();
            // 发送AJAX请求
            $.ajax({
                url: this.action, // 使用表单自身的action属性作为URL
                method: this.method, // 使用表单自身的method属性作为请求方法
                data: {
                    username: uname,
                    virtualHostName: vName,
                    exchangeName: eName,
                    queueName: qName,
                    bindingKey: bkName
                },
                success: function (result) {
                    // 请求成功时的回调函数
                    if (result) {
                        // 如果服务器返回成功状态，则显示成功信息
                        $('#result').text('表单提交成功！');
                        alert("添加成功！");
                    } else {
                        // 如果服务器返回失败状态，则显示错误信息
                        $('#result').text('表单提交失败，请重试！');
                        alert("添加失败！");
                    }
                    // 重置表单字段
                    $('form select[name="virtualHostName"]').val('');
                    $('form input[name="exchangeName"]').val('');
                    $('form input[name="queueName"]').val('');
                    $('form input[name="bindingKey"]').val('');
                },
                error: function () {
                    // 请求失败时的回调函数
                    $('#result').text('请求失败，请检查网络连接！');
                    alert("添加失败！");
                    // 重置表单字段
                    $('form select[name="virtualHostName"]').val('');
                    $('form input[name="exchangeName"]').val('');
                    $('form input[name="queueName"]').val('');
                    $('form input[name="bindingKey"]').val('');
                }
            });

            <!--overview-->
            $.ajax({
                url: "/v-host/overview",
                type: "get",
                data: {
                    username: username
                },
                dataType: "json",
                success: function (data) {
                    var html = '<table style="border-collapse: collapse; border: 1px solid black;">';
                    html += '<tr>';
                    html += '<th style="border: 1px solid black; padding: 8px;">Name</th>';
                    html += '<th style="border: 1px solid black; padding: 8px;">Exchange Number</th>';
                    html += '<th style="border: 1px solid black; padding: 8px;">Queue Number</th>';
                    html += '<th style="border: 1px solid black; padding: 8px;">Binding Number</th>';
                    html += '<th style="border: 1px solid black; padding: 8px;">Message Number</th>';
                    html += '</tr>';

                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        html += '<tr>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + item.virtualHostName + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + item.exchangeNumber + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + item.queueNumber + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + item.bindingNumber + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + item.messageNumber + '</td>';
                        html += '</tr>';
                    }

                    html += '</table>';
                    $('#virtualHostTableContainer').html(html);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log('Error: ' + textStatus + ', ' + errorThrown);
                }
            });
        });
    });
</script>
<!--请求所有绑定-->
<script>
    $(document).ready(function () {
        $("#v-host-select").on("change", function () {
            var selectedOption = $(this).val();
            $.ajax({
                url: "/binding/v-hostAll",
                type: "get",
                data: {
                    virtualHostName: selectedOption,
                    username: uname
                },
                success: function (bindingList) {
                    console.log(bindingList);
                    var html = '<table style="border-collapse: collapse; border: 1px solid black;">';
                    html += '<tr>';
                    html += '<th style="border: 1px solid black; padding: 8px;">Virtual host</th>';
                    html += '<th style="border: 1px solid black; padding: 8px;">Exchange Name</th>';
                    html += '<th style="border: 1px solid black; padding: 8px;">Queue Name</th>';
                    html += '<th style="border: 1px solid black; padding: 8px;">Binding Key</th>';
                    html += '</tr>';
                    let i = 0;
                    bindingList.forEach(function (binding) {
                        if (i % 2 === 0) {
                            html += '<tr bgcolor="lightgray">';
                        } else {
                            html += '<tr >';
                        }
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + binding.virtualHostName + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + binding.exchangeName + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + binding.queueName + '</td>';
                        html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + binding.bindingKey + '</td>';
                        html += '</tr>';
                        i = i + 1;
                    });
                    html += '</table>';
                    $('#bindingTableContainer').html(html);
                    $('#bindingNum').text(i);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log('Error: ' + textStatus + ", " + errorThrown);
                }
            });
        })
    });

    function refreshBinding() {
        var vName = $("#v-host-select").val();
        $.ajax({
            url: "/binding/v-hostAll",
            type: "get",
            data: {
                virtualHostName: vName,
                username: uname
            },
            success: function (bindingList) {
                console.log(bindingList);
                var html = '<table style="border-collapse: collapse; border: 1px solid black;">';
                html += '<tr>';
                html += '<th style="border: 1px solid black; padding: 8px;">Virtual host</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">Exchange Name</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">Queue Name</th>';
                html += '<th style="border: 1px solid black; padding: 8px;">Binding Key</th>';
                html += '</tr>';
                let i = 0;
                bindingList.forEach(function (binding) {
                    if (i % 2 === 0) {
                        html += '<tr bgcolor="lightgray">';
                    } else {
                        html += '<tr >';
                    }
                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + binding.virtualHostName + '</td>';
                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + binding.exchangeName + '</td>';
                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + binding.queueName + '</td>';
                    html += '<td style="border: 1px solid black; padding: 8px;text-align: center">' + binding.bindingKey + '</td>';
                    html += '</tr>';
                    i = i + 1;
                });
                html += '</table>';
                $('#bindingTableContainer').html(html);
                $('#bindingNum').text(i);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log('Error: ' + textStatus + ", " + errorThrown);
            }
        });
    }
</script>
<!--请求消息发布时虚拟机对应的交换机-->
<script>
    $("#v-m-add").on("click", function () {
        var selectedValue = $(this).val();
        var uname = $('#username').text();
        $.ajax({
            url: "/exchange/v-hostAll",
            type: "get",
            data: {
                virtualHostName: selectedValue,
                username: uname
            },
            success: function (exchangeList) {
                console.log(exchangeList);
                var select = $('#v-m-e');
                select.empty();
                exchangeList.forEach(function (exchange) {
                    var option = $('<option>').text(exchange.exchangeName);
                    select.append(option);
                });
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log('Error: ' + textStatus + ", " + errorThrown);
            }
        });
        console.log("Selected value is:", selectedValue);
    });

</script>
<!--发布消息-->
<script>
    $(document).ready(function () {
        $('#publishMessage').submit(function (event) {
            event.preventDefault();
            // 获取表单数据
            var vName = $('#v-m-add').val();
            var eName = $('#v-m-e').val();
            var msg = $('#v-m-msg').val();
            var routingKey = $('#v-m-r').val();
            var mode = $('#v-m-dm').val();
            // 发送AJAX请求
            $.ajax({
                url: this.action, // 使用表单自身的action属性作为URL
                method: this.method, // 使用表单自身的method属性作为请求方法
                data: {
                    username: uname,
                    virtualHostName: vName,
                    exchangeName: eName,
                    message: msg,
                    routingKey: routingKey,
                    deliveryMode: mode
                },
                success: function (result) {
                    // 请求成功时的回调函数
                    if (result) {
                        // 如果服务器返回成功状态，则显示成功信息
                        $('#result').text('表单提交成功！');
                        alert("添加成功！");
                    } else {
                        // 如果服务器返回失败状态，则显示错误信息
                        $('#result').text('表单提交失败，请重试！');
                        alert("添加失败！");
                    }
                    // 重置表单字段
                    $('form select[name="virtualHostName"]').val('');
                    $('form select[name="exchangeName"]').val('');
                    $('form input[name="message"]').val('');
                    $('form input[name="routingKey"]').val('');
                    $('form select[name="deliveryMode"]').val('2');

                },
                error: function () {
                    // 请求失败时的回调函数
                    $('#result').text('请求失败，请检查网络连接！');
                    alert("添加失败！");
                    // 重置表单字段
                    $('form select[name="virtualHostName"]').val('');
                    $('form select[name="exchangeName"]').val('');
                    $('form input[name="message"]').val('');
                    $('form input[name="routingKey"]').val('');
                    $('form select[name="deliveryMode"]').val('2');
                }
            });
        });
    });
</script>
</html>